<template>
	<view class="content">
		<view class="header">
			<view class="up">
				<text>请选择车辆 ></text>
				<uni-icons class="icon" type="scan" size="23"></uni-icons>
			</view>
			<view class="down">
				<text>未知</text>
				<text>扫码换车</text>
			</view>
		</view>
		<view class="main">
			<u-form>
				<u-form-item label="金额">
					<u-input placeholder="请输入账单金额"></u-input>
				</u-form-item>
				<u-form-item label="类别" style="height: 200upx;"></u-form-item>
				<u-form-item label="消费时间" class="time">
					<u-picker v-model="show" mode="time" ></u-picker>
					<text  @click="show = true">2021-08-09 16:19 ></text>
				</u-form-item>
				<u-form-item label="单据照片">
					<u-icon name="camera-fill" size="50" @click="photo"></u-icon>
				</u-form-item>
				<u-form-item label="地址">
					<u-input placeholder="选择填写,50字以内"></u-input>
				</u-form-item>
				<u-form-item label="备注">
					<u-input placeholder="选择填写,50字以内"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="footer">
			<button class="btn">保存再报一笔</button>
			<button class="btn1">上报</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false
			};
		},
		methods:{
			photo(){
				wx.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success (res) {
				    // tempFilePath可以作为img标签的src属性显示图片
				    const tempFilePaths = res.tempFilePaths
				  }
				})
			}
		}
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header{
			margin: 25upx;
			.up{
				display: flex;
				flex-direction: row;
				justify-content:space-between;
				position: relative;
				.icon{
					position: absolute;
					left: 89%;
				}
			}
			.down{
				margin-top: 10upx;
				display: flex;
				flex-direction: row;
				justify-content:space-between;
				font-size: 24upx;
				color: #959595;
			}
		}
		.main{
			padding: 25upx;
			box-sizing: border-box;
			border-top: 20upx solid #f2f2f2;
			.time{
				position: relative;
				text{
					position: absolute;
					left: 60%;
					top: 30%;
				}
			}
		}
		.footer{
			 width:100%;
			 display: flex;
			 align-items: center;
			 justify-content: center; 
			 position: absolute; 
			 bottom:0rpx;
			 .btn{
				 background-color: #9e7fff;
			 }
			 .btn1{
				 background-color: #7c57f4;
			 }
			button{
				width: 50%;
				color: white;
				border-radius: 0;
				font-size: 32upx;
			}
		}
	}

</style>
